<!--
 * @Author: 赵宇
 * @Description: 员工编辑页面
 * @Date: 2023-02-01 15:58:00
 * @LastEditTime: 2023-03-06 10:11:53
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\auth\components\userEdit.vue
-->
<template>
  <el-dialog draggable v-model="dialog.show" width="600px" :before-close="handleClose" class="custom-dialog">
    <template #header> 编辑用户 </template>
        <el-form :model="forms" ref="registerRef" :rules="rules" label-width="100">
          <el-form-item label="名称" prop="userName">
            <el-input v-model="forms.userName" placeholder="用户名" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="forms.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="forms.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="roleId">
            <el-select v-model="forms.roleId" placeholder="选择角色" clearable filterable>
              <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门" prop="deptMentIds">
            <el-tree-select
              v-model="forms.deptMentIds"
              multiple
              default-expand-all
              highlight-current
              check-strictly
              :data="props.depOptions[0].children"
              placeholder="选择部门可多选"
            >
            </el-tree-select>
          </el-form-item>
        </el-form>
    <template #footer>
      <span class="dialog-footer">
        <z-button type="" @click="handleClose" icon="close">取消</z-button>
        <z-button icon="check" @click="onCheck" :loading="dialog.loading"> 确认 </z-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { post } from '@/api/index.js';
let emit = defineEmits(['update:modelValue', 'onSave']);
const $message = inject('$message');
const { isPhone } = inject('$global');
const store = useStore();
let props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  depOptions: {
    type: Array,
    default: () => {
      return [];
    }
  },
  editData: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
const validatePhone = (rule, value, callback) => {
  if (!isPhone(value)) {
    callback(new Error('手机号码不正确,请检查!'));
  }
  callback();
};
let registerRef = ref();
let dialog = reactive({
  show: false,
  loading: false
});
let roles = computed(() => store.state.roles);
let formsInit = () => {
  return reactive({
    id: 0,
    userName: '',
    phone: '',
    email: '',
    roleId: null,
    deptMentIds: []
  });
};
let forms = formsInit();
let rules = {
  userName: [{ required: true, trigger: 'blur', message: '名称不能为空!' }],
  phone: [
    { required: true, trigger: 'blur', message: '手机号不能为空!' },
    { validator: validatePhone, trigger: 'blur' }
  ],
  roleId: [{ required: true, trigger: 'change', message: '角色不能为空!' }],
  deptMentIds: [{ required: true, type: 'array', trigger: 'change', message: '部门不能为空!' }]
};
watch(
  () => props.modelValue,
  val => {
    dialog.show = val;
    if (!val) return;
    if (!roles.value.length) store.dispatch('getRoles');
    const formData = formsInit();
    Object.keys(formData).map(r => {
      forms[r] = props.editData[r] != undefined ? props.editData[r] : formData[r];
    });
  },
  {
    immediate: true
  }
);

const handleClose = () => {
  emit('update:modelValue', false);
};
const onCheck = () => {
  if (!registerRef.value) return;
  registerRef.value.validate(async val => {
    if (!val) return;
    try {
      dialog.loading = true;
      await post('User/AddOrUpdate', forms);
      $message.success('编辑成功');
      dialog.loading = false;
      emit('onSave');
    } catch (error) {
      console.log('User/AddOrUpdate错误', error);
      dialog.loading = false;
    }
  });
};
</script>

<style lang="scss" scoped></style>
